<!-- 这是我的话题 -->
<template>
  <div class="my-talk">
     <el-card shadow="always" :body-style="	{ padding: '100px' }"  v-if="joingroup">
         <div class="main">
              <span >你还没有参与话题，快去参与话题讨论吧！或者您也可以自己</span>
              <router-link to="/home/mytalk">创建话题</router-link>
         </div>
          
    </el-card>
    <div class="row" v-for="row in 2" :key="row" v-else>
         <el-card shadow="hover" :body-style="	{ padding: '0px' }" class="talk-card" v-for="card in 2" :key="card" >
        <div class="talk-face">
           <img src="@/images/1.png" alt="" width="70px" height="70px">
        </div>
        <div class="tmain">
            <div class="talk-title">
                <span>佳能尼康哪个好</span>
            </div>
            <div class="talk-con" v-for="talk in 8" :key="talk">
                <a href="#">佳能哪里比较好？</a>
                <span>130条评论</span>
            </div>
        </div>
      </el-card>
    </div>
    
  
  </div>
</template>

<script>
export default {
  data () {
    return {
      joingroup:true

    };
  },

  methods: {}
}

</script>
<style lang='scss' scoped>
.my-talk{
  margin-bottom:100px;
  .main{
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .row{
      width: 100%;
      display: flex;
      justify-content: space-between;
  
   .talk-card{
       width:48%;
        height:320px;
        margin-top:20px;
        .talk-face{
             float: left;
        width:90px;
        height:320px;
        padding:20px 20px;
        img{
        box-shadow: 1px 1px 2px 2px #eee;
        }
        }
        .tmain{
            padding:20px 10px;
            margin-left:100px;
            .talk-title{
                margin-bottom: 10px;
                span{
                 
    font-size: 20px;
    letter-spacing: 3px;
    
                }
            }
            .talk-con{
                    padding: 5px 0;
    font-size: 14px;
    letter-spacing: 2px;
    span{
        font-size:13px;
        color:#909399;
    }
            }
        }
    }
  }
}
</style>